<template>
  <el-dialog
    v-model="visible"
    title="告警详情"
    width="1200px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div v-loading="loading" class="alert-detail-content">
      <el-empty
        v-if="!loading && !alertData"
        description="该资产暂无告警信息"
      />

      <div v-if="alertData && alertData.alert" class="alert-info">
        <!-- 基本信息 -->
        <el-card class="info-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="告警ID">
              {{ alertData.alert.alert_id }}
            </el-descriptions-item>
            <el-descriptions-item label="场景类型">
              {{ alertData.alert.scene_type_name }}
            </el-descriptions-item>
            <el-descriptions-item label="风险等级">
              <el-tag
                :type="getRiskLevelType(alertData.alert.risk_level)"
                size="small"
              >
                {{ alertData.alert.risk_level_name }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <el-tag
                :type="getPriorityType(alertData.alert.priority)"
                size="small"
              >
                {{ alertData.alert.priority }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="审核状态">
              <el-tag
                :type="getReviewStatusType(alertData.alert.review_status)"
                size="small"
              >
                {{ alertData.alert.review_status_name }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="工单ID">
              {{ alertData.alert.ticket_id || "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="检测时间">
              {{ alertData.alert.detected_time }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ alertData.alert.created_time }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 资产信息 -->
        <el-card class="info-card" shadow="never" style="margin-top: 15px">
          <template #header>
            <div class="card-header">
              <span>资产信息</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="资产IP">
              {{ alertData.alert.asset_ip }}
            </el-descriptions-item>
            <el-descriptions-item label="端口">
              {{ alertData.alert.asset_port }}
            </el-descriptions-item>
            <el-descriptions-item label="服务类型">
              {{ alertData.alert.asset_service }}
            </el-descriptions-item>
            <el-descriptions-item label="责任部门">
              {{ alertData.alert.responsible_department }}
            </el-descriptions-item>
            <el-descriptions-item label="责任人">
              {{ alertData.alert.responsible_person }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ alertData.alert.responsible_phone }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 告警描述 -->
        <el-card class="info-card" shadow="never" style="margin-top: 15px">
          <template #header>
            <div class="card-header">
              <span>告警描述</span>
            </div>
          </template>
          <div class="description-content">
            <pre>{{ alertData.alert.description }}</pre>
          </div>
        </el-card>

        <!-- 场景数据 -->
        <el-card
          v-if="alertData.alert.scene_data"
          class="info-card"
          shadow="never"
          style="margin-top: 15px"
        >
          <template #header>
            <div class="card-header">
              <span>场景数据</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="疑似资产ID">
              {{ alertData.alert.scene_data.suspected_asset_id }}
            </el-descriptions-item>
            <el-descriptions-item label="子类型">
              {{ alertData.alert.scene_data.sub_type }}
            </el-descriptions-item>
            <el-descriptions-item label="告警标题">
              {{ alertData.alert.scene_data.alert_title }}
            </el-descriptions-item>
            <el-descriptions-item label="推理置信度">
              <el-tag type="info" size="small">
                {{ alertData.alert.scene_data.inference_confidence }}%
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="资产IP" :span="2">
              {{ alertData.alert.scene_data.asset_ip }}
            </el-descriptions-item>
            <el-descriptions-item label="端口">
              {{ alertData.alert.scene_data.asset_port }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { getAssetAlert } from "../../../servers";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  assetId: { type: Number, default: null },
});

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value),
});

const loading = ref(false);
const alertData = ref<any>(null);

// 获取告警详情
const fetchAlertDetail = async () => {
  if (!props.assetId) {
    alertData.value = null;
    return;
  }

  loading.value = true;
  try {
    const { data } = await getAssetAlert(props.assetId);
    if (data) {
      alertData.value = data;
      if (!data.has_alert) {
        alertData.value = null;
      }
    }
  } catch (error: any) {
    ElMessage.error(error?.message || "获取告警详情失败");
    alertData.value = null;
  } finally {
    loading.value = false;
  }
};

// 监听弹窗显示和资产ID变化
watch(
  () => [visible.value, props.assetId],
  ([newVisible, newAssetId]) => {
    if (newVisible && newAssetId) {
      fetchAlertDetail();
    } else {
      alertData.value = null;
    }
  },
  { immediate: true }
);

// 获取风险等级标签类型
const getRiskLevelType = (level: string) => {
  const typeMap: Record<string, "success" | "warning" | "danger" | "info"> = {
    low: "info",
    medium: "warning",
    high: "danger",
    critical: "danger",
  };
  return typeMap[level] || "info";
};

// 获取优先级标签类型
const getPriorityType = (priority: string) => {
  const typeMap: Record<string, "success" | "warning" | "danger" | "info"> = {
    low: "info",
    medium: "warning",
    high: "danger",
  };
  return typeMap[priority] || "info";
};

// 获取审核状态标签类型
const getReviewStatusType = (status: string) => {
  const typeMap: Record<string, "success" | "warning" | "danger" | "info"> = {
    pending_review: "warning",
    approved: "success",
    rejected: "danger",
    ignored: "info",
  };
  return typeMap[status] || "info";
};

// 关闭弹窗
const handleClose = () => {
  visible.value = false;
};
</script>

<style scoped lang="scss">
.alert-detail-content {
  height: 600px;
  overflow-y: auto;

  .info-card {
    .card-header {
      font-weight: 500;
      font-size: 14px;
    }

    .description-content {
      pre {
        margin: 0;
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 4px;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 13px;
        line-height: 1.6;
        color: #606266;
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
